import React, { useState, useEffect } from 'react'
import { View, Image, Text } from '@tarojs/components'
import { AtInputNumber,AtButton } from 'taro-ui'
import ToLogin from '../../compontents/toLogin'
import Taro from '@tarojs/taro'

import useModel from 'flooks';
import store from '../../stores/index'

import api from '../../http/api'
const {ajaxAddOrder} = api
import axiosWx from 'axios'

import './index.less'
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/input-number.scss";
import { isEmpty } from 'lodash'

export default (props: any) => {
  const { detailData } = useModel(store.detailData, ['detailData'])
  const ids = parseInt(props.tid.split('ids=')[1].split('&')[0])
  const info: any = Taro.getStorageSync('info')
  const wxinfo:any = Taro.getStorageSync('wxinfo')
  const {loginId,uSchoolId} = JSON.parse(info).userInfo
  const {openid} = JSON.parse(wxinfo)
  // 购买数量
  const [num,setNum] = useState(0)
    // 选中套餐类型
    const [activeTicket,setActiveTicket] = useState(ids)
    const [price,setPrice] = useState(0)
  //点击购买数量 
  const numChange = (e)=>{
    setNum(e)
    setPrice(detailData.ticket[activeTicket].price*e)
  }
  // 点击套餐列表
  const ticketListChange = (item:any,i:any)=>{
    if(i!==activeTicket){
      setNum(0)
      setPrice(0)
    }
    setActiveTicket(i)
  }
  const makeCode= n => {
		var num = "";
		for (var i = 0; i < n; i++) {
			num += Math.floor(Math.random() * 10)
		}
		return num +'';
	}
  // 点击购买按钮
  const buyNow = ()=>{
    if(price>0){
      const params = {
        loginId,
        uTicketId:detailData.ticket[activeTicket].id,
        price,
        ticketNum:num,
        uSchoolId,
        openid,
        uBusinessId:detailData.id,
        userName:detailData.userName,
        businessManageId:detailData.businessManageId
      }
      ajaxAddOrder(params).then((res:any)=>{
        Taro.redirectTo({
          url:`/pages/uPay/index?orderNum=${res.data.orderNum}`
        })
      })
      
    }else{
      Taro.showToast({
        title: '购买数量不能为0',
        icon: 'none',
      })
    }
  }
  useEffect(() => {
    
  }, [])
  
  return (
    <View className='uBuy'>
      <ToLogin url='/pages/active/index'></ToLogin>
      <View className='content'>
        <View className='info'>
           <Image className='img' src={detailData.src.split(',')[0]} ></Image>
           <View className='right'>
             <View className='title'>{detailData.title}</View>
             <View className='priceL'>
              <Text className='p1'>¥{detailData.price}</Text>
              <Text className='p2'>¥{detailData.priceOld}</Text>
            </View>
           </View>
        </View>
        <View className='ticket'>
          <View className='title'>可选套餐</View>
          {
            detailData.ticket.filter((item:any)=>item.numTotal-item.num>0).map((item:any,i:any)=>(
              <View onClick={()=>{ticketListChange(item,i)}} className={activeTicket===i?'ticketList active':'ticketList'} >
                <View className='subTitle'>{item.content}</View>
                <View className='priceL'>
                  <Text className='p1'>¥{item.price}</Text>
                  <Text className='p2'>¥{item.priceOld}</Text>
                </View>
              </View>
            ))
          }
        </View>
        <View className='numTool'>
          <Text className='numT'>购买数量</Text>
          <AtInputNumber
            type='number'
            min={0}
            max={1}
            step={1}
            value={num}
            onChange={numChange}
          />
        </View>
      </View>
      <View className='btmTool'>
        <View className='numTotal'>
          <Text className='txt'>合计：</Text>
          <Text className='price'>￥{price}</Text>
        </View>
        <AtButton disabled={!detailData.ticket.filter((item:any)=>item.numTotal>item.num).length} onClick={buyNow} className='btn' size='small'>立即购买</AtButton>
      </View>
    </View>
  );
};
